<template>
  <div id="paicharts5"></div>
</template>

<script>
import * as  echarts from 'echarts' 

export default {
  name: "PAicharts",
  data() {
    return {
     
      chart: null,
      options: null,
    };
  },
  mounted(){
    this.$nextTick(function () {
    this.initcharts()

    })
  },
  methods: {
    initcharts() {
      this.chart = echarts.init(document.getElementById("paicharts5"));
      this.options = {
        color: ['#FF0000', '#00FF00', '#FFFF00', '#FF00FF', '#00FFFF', '#0000FF'],
        tooltip: {
          trigger: "item",
        },
        legend: {
          // show:false,
          orient: "vertical",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 15,
        //   bottom: "center",
          right:20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.60)",
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "0%",
        },
        series: [
          {
            name: "占比",
            type: "pie",
            radius: "90%",
            center: ['45%', '55%'],
            labelLine: {
              show: false,
            },
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              borderColor: "#000",
              borderWidth:2,
            },
            data: [
            
{name:"埠头镇",value:'16'},
{name:"大战乡",value:'26'},
{name:"安岭乡",value:'56'},
{name:"官路镇",value:'16'},
{name:"广度乡",value:'26'},
 
            ],
          },
        ],
      };
      this.chart.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
#paicharts5{
  height: 160px;
  width: 350px;
}
</style> 